<template>
	<view class="register-container">
		<!-- 头部标题 -->
		<view class="header">
			<text class="title">用户注册</text>
			<text class="subtitle">开启您的代驾之旅</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 手机号输入 -->
			<view class="input-group">
				<text class="label">手机号</text>
				<input v-model="form.phone" type="number" placeholder="请输入手机号" maxlength="11" class="input" @blur="validatePhone" />
				<text class="error-msg">{{ errors.phone }}</text>
			</view>

			<!-- 验证码输入 -->
			<view class="input-group">
				<text class="label">验证码</text>
				<view class="code-input-wrapper">
					<input v-model="form.code" type="number" placeholder="请输入验证码" maxlength="4" class="input code-input" @blur="validateCode" />
					<button class="get-code-btn" :disabled="countdown > 0 || !canGetCode" @tap="getSMSCode">
						{{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
					</button>
				</view>
				<text class="error-msg">{{ errors.code }}</text>
			</view>

			<!-- 密码输入 -->
			<!-- <view class="input-group">
				<text class="label">设置密码</text>
				<input v-model="form.password" password placeholder="6-20位字母数字组合" maxlength="20" class="input" @blur="validatePassword" />
				<text class="error-msg">{{ errors.password }}</text>
			</view> -->

			<!-- 确认密码 -->
			<!-- <view class="input-group">
				<text class="label">确认密码</text>
				<input v-model="form.confirmPassword" password placeholder="请再次输入密码" class="input" @blur="validateConfirmPassword" />
				<text class="error-msg">{{ errors.confirmPassword }}</text>
			</view> -->

			<!-- 协议勾选 -->
			<view class="agreement">
				<checkbox-group @change="handleAgreementChange">
					<label class="checkbox-label">
						<checkbox :checked="agreed" color="#2979ff" />
						<text>我已阅读并同意</text>
						<text class="protocol">《用户协议》</text>
						<text>和</text>
						<text class="protocol">《隐私政策》</text>
					</label>
				</checkbox-group>
			</view>

			<!-- 注册按钮 -->
			<button class="register-btn primary-btn" :disabled="!canSubmit" @tap="handleRegister">
				立即注册
			</button>

			<!-- 已有账号 -->
			<view class="login-link">
				<text>已有账号？</text>
				<text class="link" @tap="navigateToLogin">去登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, onUnmounted, ref, watch } from 'vue'
import { createVerifyCode, register } from '@/api/user.js'
import { useUserStore } from '@/stores/userStore.js'
import { auditStatusEnum } from '@/utils/enums.js'
import { setToken } from '@/utils/auth' 

const driver = useUserStore()

const form = ref({
	phone: '',
	code: '',
	password: '',
	confirmPassword: ''
})
const errors = ref({
	phone: '',
	code: '',
	password: '',
	confirmPassword: ''
})
const countdown = ref(0)
const timer = ref(null)
const agreed = ref(false)

let canGetCode = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.value.phone)
})

let canSubmit = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.value.phone) 
			&& form.value.code.length === 4 
			// && form.value.password.length >= 6 
			// && form.value.confirmPassword === form.value.password 
			&& agreed.value
})

// 验证手机号
function validatePhone() {
	if (!form.value.phone) {
		errors.value.phone = '请输入手机号'
	} else if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
		errors.value.phone = '请输入正确的手机号'
	} else {
		errors.value.phone = ''
	}
}

// 验证验证码
function validateCode() {
	if (!form.value.code) {
		errors.value.code = '请输入验证码'
	} else if (form.value.code.length !== 4) {
		errors.value.code = '验证码格式错误'
	} else {
		errors.value.code = ''
	}
}

// 验证密码
/* function validatePassword() {
	if (!form.value.password) {
		errors.value.password = '请输入密码'
	} else if (form.value.password.length < 6) {
		errors.value.password = '密码长度不少于6位'
	} else {
		errors.value.password = ''
	}
} */

// 验证确认密码
/* function validateConfirmPassword() {
	if (!form.value.confirmPassword) {
		errors.value.confirmPassword = '请确认密码'
	} else if (form.value.confirmPassword !== form.value.password) {
		errors.value.confirmPassword = '两次输入密码不一致'
	} else {
		errors.value.confirmPassword = ''
	}
} */

// 获取短信验证码
function getSMSCode() {
	validatePhone()
	if (errors.value.phone) return

	uni.showLoading({
		title: '验证码发送中...',
		mask: true
	})
	createVerifyCode(form.value.phone).then(res => {
		// 开始倒计时
		startCountdown()
		// 关闭加载
		uni.hideLoading()
		uni.showToast({
			title: '验证码已发送' + res.data,
			icon: 'none'
		})
	}).finally(e => {
		uni.hideLoading()
	})
}

// 开始倒计时
function startCountdown() {
	countdown.value = 60
	timer.value = setInterval(() => {
		if (countdown.value <= 0) {
			clearInterval(timer.value)
			return
		}
		countdown.value--
	}, 1000)
}

// 协议勾选变化
function handleAgreementChange(e) {
	agreed.value = e.detail.value.length > 0
}

// 处理注册
function handleRegister() {
	if (!canSubmit.value) return

	uni.showLoading({
		title: '注册中...'
	})

	register({
		phone: form.value.phone,
		verifyCode: form.value.code
	}).then(res => {
		// console.log(res)
		uni.hideLoading()
		uni.showToast({
			title: '注册成功',
			icon: 'none',
			duration: 1500,
			success: () => {
				// uni.navigateBack()
				setToken(res.data)
				driver.refreshCurrentDriver().then(res => {
					// 跳转到提交信息页面
					uni.reLaunch({
						url: '/pages/mine/edit-info',
						success: () => {
							uni.showToast({
								duration: 2500,
								icon: 'none',
								title: '请您提交审核信息'
							})
						}
					})
				})
			}
		})
	}).finally(e => {
		uni.hideLoading()
	})
}

// 跳转到登录页
function navigateToLogin() {
	uni.navigateBack()
}

onUnmounted(() => {
	if (timer.value) clearInterval(timer.value)
})
</script>

<style lang="scss" scoped>
* {
	box-sizing: border-box;
}
.register-container {
	padding: 40rpx 60rpx;
	height: 100vh;
	background: #f8f8f8;

	.header {
		margin: 60rpx 0 40rpx;

		.title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.subtitle {
			font-size: 28rpx;
			color: #999;
		}
	}

	.form-container {
		.input-group {
			margin-bottom: 40rpx;

			.label {
				display: block;
				margin-bottom: 16rpx;
				font-size: 28rpx;
				color: #666;
			}

			.input {
				height: 88rpx;
				padding: 0 24rpx;
				border-radius: 12rpx;
				border: 2rpx solid #ddd;
				background: #fff;
				font-size: 32rpx;
				&:hover {
					border: 2rpx solid #3f89ff;
				}
			}

			.code-input-wrapper {
				display: flex;

				.code-input {
					flex: 1;
					margin-right: 20rpx;
				}

				.get-code-btn {
					width: 200rpx;
					height: 88rpx;
					line-height: 88rpx;
					background: #f0f0f0;
					color: #2979ff;
					font-size: 28rpx;
					padding: 0;

					&[disabled] {
						color: #999;
						background: #f5f5f5;
					}
				}
			}

			.error-msg {
				display: block;
				margin-top: 10rpx;
				color: #f56c6c;
				font-size: 24rpx;
			}
		}

		.agreement {
			margin: 30rpx 0;
			font-size: 26rpx;
			color: #666;

			.checkbox-label {
				display: flex;
				align-items: center;
			}

			.protocol {
				color: #2979ff;
			}
		}

		.register-btn {
			margin-top: 30rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 12rpx;
			color: #fff;
			font-size: 32rpx;

			&[disabled] {
				opacity: 0.6;
			}
		}

		.login-link {
			margin-top: 40rpx;
			text-align: center;
			font-size: 28rpx;
			color: #666;

			.link {
				color: #2979ff;
			}
		}
	}
}
</style>